<template>
  <div class="favor">
    <div class="navBar">
      <nav-bar left-text="旅途">
        <template v-slot:title>
          <div class="title">
            <van-tabs v-model:active="tabActive" type="card" @click-tab="onClickNavBar" color="#ff9854">
              <template v-for="(title, index) in titles" :key="index">
                <van-tab :title="title">
                </van-tab>
              </template>
            </van-tabs>
          </div>
        </template>
      </nav-bar>
    </div>
    <!-- 我的收藏 -->
    <div v-if="tabActive == 0" class="favor">
      <van-tabs v-model:active="tab" @click-tab="onClickTab">
        <van-tab title="房屋">
          <!-- 内容 -->
          <div class="content">
            <template v-for="(item, index) in favorList">
              <house-item :item-data="item"></house-item>
            </template>

          </div>
        </van-tab>
        <van-tab title="房东">
          <!-- 内容 -->
          <div class="content">
            <div v-if="landlordList.length > 0"></div>
            <div v-else class="no-data">
              <no-data />
            </div>
          </div>
        </van-tab>
      </van-tabs>

    </div>

    <!-- 浏览历史 -->
    <div class="history" v-else>
      <div class="content">
        <template v-for="(item, index) in historyList">
          <house-item :item-data="item"></house-item>
        </template>


      </div>
    </div>
  </div>
</template>

<script setup>
import navBar from "@/components/navBar/index.vue"
import { ref, computed } from 'vue';
import useFavorStore from "@/stores/modules/favor"
import houseItem from "./components/houseItem.vue"

import noData from "@/components/no-data/index.vue"

const titles = ["我的收藏", "浏览历史"];
const favorStore = useFavorStore()
// 发送请求
favorStore.fetchFavorData()
favorStore.fetchHistoryList()
//我的收藏数据（房屋数据）
const favorList = computed(() => favorStore.favorList)
//我的收藏（房东数据）
const landlordList = ref([])
// 浏览历史数据
const historyList = computed(() => favorStore.historyList)

const tabActive = ref(0)
const tab = ref('')
function onClickNavBar({ title }) {
  console.log(title)
}
function onClickTab({ title }) {
}

</script>

<style lang="less" scoped>
.favor {
  --van-tabs-bottom-bar-color: var(--primary-color);
  // 修改我的收藏和浏览历史中见的padding间距
  --van-padding-base: 2.06667vw;

  .content {
    padding: 10px 20px 55px 20px;
  }
}
</style>